<template>
	<view class="container">
		<view class="invoice-section">
			<view class="form-item">
				<text class="label required">抬头名称</text>
				<view class="content" @click="selectTitle">
					<text v-if="selectedTitle.name">{{ selectedTitle.name }}</text>
					<text v-else class="placeholder">请选择抬头</text>
					<view class="actions">
						<text class="add-more"> </text>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
			</view>
			<view class="form-item">
				<text class="label">抬头类型</text>
				<view class="content">
					<text>{{ selectedTitle.type === 'company' ? '非自然人' : '自然人' }}</text>
				</view>
			</view>
			<view class="form-item">
				<text class="label">税号</text>
				<view class="content">
					<text>{{ selectedTitle.taxId }}</text>
				</view>
			</view>
		</view>

		<view class="invoice-section">
			<view class="form-item-column">
				<text class="label">选择发票备注内容打印信息（可多选）</text>
				<view class="tags">
					<view v-for="(tag, index) in remarkTags" :key="index" :class="['tag', { active: selectedTags.includes(tag) }]" @click="toggleTag(tag)">
						{{ tag }}
					</view>
				</view>
			</view>
			<view class="form-item-column">
				<text class="label">备注</text>
				<textarea class="remark-input" v-model="remark" placeholder="该内容将会打印到发票上" maxlength="110"></textarea>
			</view>
		</view>

		<view class="summary-section">
			<text>总金额</text>
			<text class="total-amount">¥331.11</text>
		</view>

		<view class="reminder-section">
			<view class="section-title">温馨提示</view>
			<view class="reminder-content">
				<p>电子发票的销售方名称与您的昆仑加油卡归属地或交易消费加油站主体一致；</p>
				<p>可能开具多张发票，多张开票金额总和为您所选订单总金额；</p>
				<p>提交后预计在5分钟内可完成开具；</p>
				<p>所选订单第一次开票后仅能重开一次，请确认信息无误后提交。</p>
			</view>
		</view>

		<view class="footer">
			<button class="submit-btn" @click="submitInvoice">提交</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const selectedTitle = ref({
	id: 1,
	name: '深圳市一诺程实业有限公司',
	type: 'company',
	taxId: '91440300MA5ED4N15K'
});

const remarkTags = ref(['车牌号', '交易时间', '油站名称', '商品名称']);
const selectedTags = ref([]);
const remark = ref('');

const toggleTag = (tag) => {
	const index = selectedTags.value.indexOf(tag);
	if (index > -1) {
		selectedTags.value.splice(index, 1);
	} else {
		selectedTags.value.push(tag);
	}
};

const selectTitle = () => {
	uni.navigateTo({ url: '/pages/invoice/title-list?selectMode=true' });
};

const submitInvoice = () => {
	uni.showLoading({ title: '提交中...' });
	setTimeout(() => {
		uni.hideLoading();
		uni.showToast({ title: '开票成功', icon: 'success' });
		setTimeout(() => {
			uni.redirectTo({ url: '/pages/invoice/history' });
		}, 1500);
	}, 1000);
};

// 监听选择抬头事件
uni.$on('selectInvoiceTitle', (title) => {
	selectedTitle.value = title;
});

</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 140rpx;
}
.invoice-section, .summary-section, .reminder-section {
	background-color: #fff;
	margin: 20rpx 30rpx;
	border-radius: 16rpx;
	padding: 0 30rpx;
}
.form-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;
}
.form-item:last-child {
	border-bottom: none;
}
.label {
	font-size: 26rpx;
	color: #333;
}
.label.required::before {
	content: '*';
	color: red;
	margin-right: 4rpx;
}
.content {
	display: flex;
	align-items: center;
	font-size: 30rpx;
	color: #333;
}
.placeholder {
	color: #999;
}
.actions {
	display: flex;
	align-items: center;
}
.add-more {
	color: #1DCFB7;
	font-size: 28rpx;
	margin-right: 10rpx;
}
.form-item-column {
	padding: 30rpx 0;
}
.tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;
}
.tag {
	background-color: #f5f5f5;
	color: #666;
	padding: 10rpx 20rpx;
	border-radius: 30rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	font-size: 26rpx;
}
.tag.active {
	background-color: #e8f9f7;
	color: #1DCFB7;
	border: 1rpx solid #1DCFB7;
}
.remark-input {
	width: 100%;
	height: 150rpx;
	background-color: #f5f5f5;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-top: 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}
.summary-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
}
.total-amount {
	font-size: 36rpx;
	font-weight: bold;
	color: #1DCFB7;
}
.reminder-section {
	padding: 30rpx;
}
.section-title {
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}
.reminder-content p {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 10rpx;
}
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	border-top: 1rpx solid #eee;
}
.submit-btn {
	background-color: #1DCFB7;
	color: #fff;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
}
</style>